<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/9/10
  Time: 20:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <meta charset="utf-8">
        <title>轮播图</title>
        <link rel="stylesheet" href="../layui/css/layui.css">
        <link href="../layui/css/layui.css" rel="stylesheet">
        <script src="../js/jquery-1.12.4.js" type="text/javascript"></script>
        <script src="../layui/layui.js" type="text/javascript"></script>
        <script type="text/javascript">

        layui.use(['table','form','layer'], function(){
                var table = layui.table;
                var form = layui.form;

                //第一个实例
                table.render({
                    elem: '#guruTable',
                    url: '${pageContext.request.contextPath}/guru/selectGuru', //数据接口
                    page: true, //开启分页
                    toolbar:"#guruToolbar",
                    cols: [[ //表头
                        {type:"checkbox"},
                        { title: '上师编号',field: 'guruId', width:150, sort: true,align:'center'},
                        {title: '上师名字',field: 'guruName',align:'center'},
                        {title: '上师照片',templet:"#imgTemplet",align:'center'},
                        {title: '上师法号',field: 'guruNickname',align:'center'},
                        {title: '上师状态',templet: '#guruStatus',align:'center'},
                        {title: '操作',templet:"#doTemplet",align:'center', width:300}
                    ]]
                });

                //监听添加上师的提交
                form.on('submit(addGuru)', function(data){
                   /* console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                    console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}*/
                    var formDate = new FormData(document.getElementById("addGuruForm"));
                    $.ajax({
                        url:"${pageContext.request.contextPath}/guru/addGuru",
                        type:"post",
                        processData:false,
                        contentType:false,
                        async:false,
                        cache:false,
                        data:formDate,
                        success:function (data) {
                            layer.closeAll("page");
                            if (data.isAdd) {
                                layer.alert("添加成功",{time:1000});
                            }else {
                                layer.alert("添加失败",{time:1000});
                            }
                            //添加成功之后刷新页面数据 重载页面
                            table.reload("guruTable");
                        }
                    })
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });

            //监听批量添加上师的提交
            form.on('submit(multiAddGuru)', function(data){
                /* console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                 console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                 console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}*/
                var formDate = new FormData(document.getElementById("multiAddGuruForm"));
                $.ajax({
                    url:"${pageContext.request.contextPath}/guru/multiAddGuru",
                    type:"post",
                    processData:false,
                    contentType:false,
                    async:false,
                    cache:false,
                    data:formDate,
                    success:function (data) {
                        layer.closeAll("page");
                        if (data.isMultiAdd) {
                            layer.alert("批量添加成功",{time:1000});
                        }else {
                            layer.alert("批量添加失败",{time:1000});
                        }
                        //添加成功之后刷新页面数据 重载页面
                        table.reload("guruTable");
                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

                //监听修改上师的提交
                form.on('submit(updateGuru)', function(data){
                    /* console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                     console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                     console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}*/
                    var formDate = new FormData(document.getElementById("updateGuruForm"));
                    $.ajax({
                        url:"${pageContext.request.contextPath}/guru/updateGuru",
                        type:"post",
                        processData:false,
                        contentType:false,
                        async:false,
                        cache:false,
                        data:formDate,
                        success:function (data) {
                            layer.closeAll("page");
                            if (data.isUpdate) {
                                layer.alert("修改成功",{time:1000});
                            }else {
                                layer.alert("修改失败",{time:1000});
                            }
                            //添加成功之后刷新页面数据 重载页面
                            table.reload("guruTable");
                        }
                    })
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });
            });
            function addGuru() {
                //每次添加之前先重置一下表单数据
                $("#addGuruForm")[0].reset();
                var layer = layui.layer;
                layer.open({
                    title:"上传轮播图图片",
                    type: 1,
                    content: $("#addGuruForm"), //这里content是一个普通的String
                    area:"400px",
                    maxmin: true
                });
            }
            function newFile() {
                var windowURL = window.URL || window.webkitURL;
                var loadImg = windowURL.createObjectURL(document.getElementById('guruImg1').files[0]);
                document.getElementById('guruImg').setAttribute('src',loadImg);
            }
            //修改表单的图片回显
            function updateFile() {
                var windowURL = window.URL || window.webkitURL;
                var loadImg = windowURL.createObjectURL(document.getElementById('guruImg3').files[0]);
                document.getElementById('guruImg4').setAttribute('src',loadImg);
            }

            //删除上师
            function deleteGuru(guruId) {
                //点击删除按钮请求后台执行删除
                //删除是一个很危险的操作 所以在删除之前提醒一下
                layer.confirm('是否确认删除?', {icon: 3, title:'删除提示'}, function(index){
                    //点击去人删除时再去进行对应的请求
                    $.ajax({
                        url:"${pageContext.request.contextPath}/guru/deleteGuru",
                        data:{"guruId":guruId},
                        success:function (data) {
                            if (data.isDelete) {
                                layer.alert("删除成功",{time:2000});
                            }else {
                                layer.alert("删除失败",{time:2000});
                            }
                            //请求完以后刷新数据
                            table.reload("guruTable");
                        }
                    })
                    //重载数据
                    var table = layui.table;
                    layer.close(index);
                });
            }

            //修改上师信息，当点击修改时，需要先在后台查询出一个上师的信息
            //展示在表单中，然后弹出表单
        function updateGuru(guruId) {
            //发送ajax请求查询出一个上师
            $.ajax({
                url:"${pageContext.request.contextPath}/guru/selectOneGuru",
                data:{"guruId":guruId},
                success:function (data) {
                    //将查询到的数据展示在表单中
                    $("#guruId").val(data.guruId);
                    $("#guruName").val(data.guruName);
                    $("#guruNickname").val(data.guruNickname);
                    $("#guruImg4").attr('src','${pageContext.request.contextPath}'+data.guruImage);
                    //弹出修改的表单
                    layer.open({
                        type:1,
                        title:"修改上师信息",
                        content:$("#updateGuruForm"),
                        area:"400px",
                        maxmin: true
                    })
                }
            })
        }

        //点击按钮解冻或者冻结 点击按钮向后台放请求 进行对应的更改
            function guruStatus(guruId,guruStatus) {
                $.ajax({
                    url:"${pageContext.request.contextPath}/guru/updateGuruStatus",
                    data:{"guruId":guruId,"guruStatus":guruStatus},
                    success:function (data) {
                       if (guruStatus == 1) {
                           if (data.isUpdataStatus) {
                               layer.alert("解冻成功",{time:1000});
                           }else {
                               layer.alert("解冻失败",{time:1000});
                           }
                       }else {
                           if (data.isUpdataStatus) {
                               layer.alert("冻结成功",{time:1000});
                           }else {
                               layer.alert("冻结失败",{time:1000});
                           }
                       }
                       //重载表格数据
                        var table = layui.table
                        table.reload("guruTable");
                    }
                })
            }

            //点击批量添加按钮 弹出选择文件的form表单
        function multiAddGuru() {
            //每次添加之前先重置一下表单数据
            $("#multiAddGuruForm")[0].reset();
            var layer = layui.layer;
            layer.open({
                title:"批量添加",
                type: 1,
                content: $("#multiAddGuruForm"), //这里content是一个普通的String
                area:"360px",
                maxmin: true
            });
        }
        //点击数据导出时，将数据库中上师的数据导出Excel表格
        function downLoadGuru() {
            //发送ajax请求进行文件的下载
            $.ajax({
                url:"${pageContext.request.contextPath}/guru/downLoadGuru",
                success:function (data) {
                    if (data.isDownLoad) {
                        layer.alert("导出成功,导出地址为"+data.name);
                    }
                }
            })
        }
        </script>
        <script type="text/html" id="guruStatus">
            {{#  if(d.guruStatus == 0){ }}
            正常
            {{#  } else { }}
            冻结
            {{#  } }}
        </script>
        <script type="text/html" id="doTemplet">
            <button type="button" class="layui-btn" onclick="updateGuru('{{d.guruId}}')">
                修改
            </button>
            {{#  if(d.guruStatus == 0){ }}
            <button type="button" class="layui-btn layui-btn-normal" onclick="guruStatus('{{d.guruId}}','{{d.guruStatus}}')">
                冻结
            </button>
            {{#  } else { }}
            <button type="button" class=" layui-btn layui-btn-warm" onclick="guruStatus('{{d.guruId}}','{{d.guruStatus}}')">
                解冻
            </button>
            {{#  } }}

            <button type="button" class="layui-btn layui-btn-danger" onclick="deleteGuru('{{d.guruId}}')">
                删除
            </button>
        </script>
        <script type="text/html" id="imgTemplet">
            <img src="${pageContext.request.contextPath}{{d.guruImage}}" width="100px"/>
        </script>
    </head>
    <body>
        <%--轮播图的展示--%>
        <table id="guruTable" lay-filter="cmfz_table"></table>

        <%--数据表格绑定工具栏--%>
        <div id="guruToolbar" style="display: none;">
            <button type="button" class="layui-btn" onclick="addGuru()">
                <i class="layui-icon layui-icon-add-1"></i>添加上师
            </button>
            <button type="button" class="layui-btn layui-btn-danger" onclick="multiDelete()">
                <i class="layui-icon layui-icon-delete"></i>批量删除
            </button>
            <button type="button" class="layui-btn" onclick="multiAddGuru()">
                <i class="layui-icon layui-icon-add-1"></i>批量添加
            </button>
            <button type="button" class="layui-btn" onclick="downLoadGuru()">
                <i class="layui-icon layui-icon-add-1"></i>数据导出
            </button>
        </div>

        <%--添加上师的form表单--%>
        <form class="layui-form" action="" id="addGuruForm" style="display: none">
            <div class="layui-form-item">
                <label class="layui-form-label">上师名字</label>
                <div class="layui-input-block">
                    <input type="text" name="guruName" required  lay-verify="required" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上师头像</label>
                <div class="layui-input-block">
                    <input type="file" onchange="newFile()" id="guruImg1" name="guruImg" required  lay-verify="required" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" >
                <label class="layui-form-label"></label>
                <img id="guruImg" width="100px" height="100px">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上师法号</label>
                <div class="layui-input-block">
                    <input type="text" name="guruNickname" required  lay-verify="required" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上师状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="guruStatus" value="0" title="正常" checked>
                    <input type="radio" name="guruStatus" value="1" title="冻结">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="addGuru">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

        <%--修改上师的form表单--%>
        <form class="layui-form" action="" id="updateGuruForm" style="display: none">
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <input id="guruId" type="text" name="guruId" required  lay-verify="required" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上师名字</label>
                <div class="layui-input-block">
                    <input id="guruName" type="text" name="guruName" required  lay-verify="required" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上师头像</label>
                <div class="layui-input-block">
                    <input type="file" onchange="updateFile()" id="guruImg3" name="guruImg" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" >
                <label class="layui-form-label"></label>
                <img id="guruImg4" width="100px" height="100px">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上师法号</label>
                <div class="layui-input-block">
                    <input id="guruNickname" type="text" name="guruNickname" required  lay-verify="required" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="updateGuru">确认修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        <%--批量添加上师的form表单--%>
        <form class="layui-form" action="" id="multiAddGuruForm" style="display: none">
            <div class="layui-form-item">
                <label class="layui-form-label">批量文件</label>
                <div class="layui-input-block">
                    <input type="file"  name="mutilGuru" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="multiAddGuru">确认添加</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </body>
</html>
